<!DOCTYPE html>
<html lang="zh-cn">
{include file="public/head" /}
<link href="/static/member/global-min.css" type="text/css" rel="stylesheet">
<link href="/static/member/account-settings.css" type="text/css" rel="stylesheet">
<style>
.bonus{display: block;}-->
.phoneInfoCheck .getVerify-Invalid { background: #7a7c7d; cursor: default }-->
.disabled{pointer-events:none;}-->
</style>
<!--头部-->
{include file="public/header" /}
<body>
<br><br><br>
<div id="wrapper" class="wrapper-reg">
    <div class="reg-title">
        <h2>注册</h2>
        <b class="line"></b></div>
    <div id="accountInfo" class="reg-items" style="display: block;padding: 0;">
        <form method="post" action="{:url('Member/regok')}" id="insertWrods">
            <ul class="items">
                <li class="txt">手机号</li>
                <li>
                    <input type="text"  class="input" name="phone" maxlength="11" placeholder="请输入您的手机号" id="phone">
                </li>
            </ul>
            <ul class="items">
                <li class="txt">验证码</li>
                <li>
                    <input  class="input" name="code" type="code"  style="width:126px;" maxlength="4" placeholder="输入图片验证码" id="code">
                    <a href="javascript:history.go(0)">
                        <img src="{:url('Member/checkVerify')}"  width="104" height="42" alt="验证码" title="验证码" class="verifycode">
                    </a>
                </li>
            </ul>
            <ul class="items">
                <li class="phoneInfoCheck">
                <li class="txt">短信验证码</li>
                <input type="text" id="alicode" name="alicode" style="width:126px;" class="input" maxlength="6">
                <span style="display: inline-block;padding:5px;background-color:#15456f;border-radius:2px;margin-left:7px;" class="buttonB">
                            <a href="javascript:;" class="r3 getVerifyType getVerify-Invalid" id="msgCode" style="cursor: pointer;color:white;">短信获取</a>
                    </span>

                </li>
            </ul>
            <ul class="items">
                <li class="txt">设置昵称</li>
                <li>
                    <input type="text" id="nickname" name="nickname" class="input input-pwd" maxlength="10" placeholder="请输入昵称">
                </li>
            </ul>

            <ul class="items">
                <li class="txt">登录密码</li>
                <li>
                    <input type="password" id="pwd1" name="pwd1" onblur="chekPwdfor()" class="input input-pwd" maxlength="16" placeholder="请输入6-16位登录密码">
                </li>
            </ul>
            <ul class="items">
                <li class="txt">确认密码</li>
                <li>
                    <input type="password" id="pwd2" name="pwdok" onblur="checkPWDui()" class="input input-pwd" maxlength="16" placeholder="请确认6-16位登录密码">
                </li>
            </ul>

            <div class="agreement">
                <label class="label">点击“下一步”按钮，即表示你同意《 <span id="content" class="commentClick">大观网注册协议</span> 》</label>
                <span id="protocolTip"></span>
            </div>
            <div class="next-step">
                <button type="submit" class="gbtn btn-gray" id="signSubmit" style="background-color:#15456f;cursor:pointer">下一步</button>
            </div>
        </form>
        <div class="security-pro"><i class="icons ver-green-down"></i><b>您的信息通过256位SGC加密保护，数据传输安全</b></div>
    </div>
    <!--填写账户信息-->
</div>





<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>

<script src="/static/admin/js/jquery.form.js"></script>
<script src="/static/admin/js/layer/layer.js"></script>
<script>
    $(function(){
        $('#content').click(function () {
            layer.open({
                title: '大观网注册协议'
                ,content: "【注意】欢迎申请使用大观网公司及其他合作运营主体（下列简称为“大观网公司”或“大观网”）提供的服务。请您（下列简称为“用户”）仔细阅读以下全部内容（特别是粗体下划线标注的内容）。如用户不同意本服务条款任意内容，请勿注册或使用大观网服务。如用户通过进入注册程序并勾选“我同意大观网帐号服务条款”，即表示用户与大观网公司已达成协议，自愿接受本服务条款的所有内容。此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。"
            });

        });
    });

</script>
<script type="text/javascript">

    function getButton(){
        $('.buttonB').on('click',function() {
            var code = $('#code').val();
            var phone = $('#phone').val();
            if (code == ''){
                layer.msg('验证码不能为空',{icon:5});
                return false
            }
            if (phone == ''){
                layer.msg('手机号不能为空',{icon:5});
                return false
            }

            //alert(phone);
            $.ajax({
                url: "{:url('Member/registe')}",
                type: 'post',
                dataType: 'json',
                data: {'code': code,'phone':phone},
                success:function(res){
                    if(res.code == 1){
                        layer.msg(res.msg,{icon:6});

                        $('.buttonB').addClass("disabled");
                        $('.buttonB').css("background-color", "gray");
                        $('.buttonB a').html("80s");
                        var i = 80;
                        var times = setInterval(function () {
                            if (i <= 0) {
                                $('.buttonB').removeClass("disabled");
                                clearInterval(times);
                                $('.buttonB a').html("重新获取验证码");
                                $('.buttonB').css("background-color", "#15456f");
                                $('.buttonB').on("click", function () {
                                    get();
                                });
                            } else {

                                --i;
                                $('.buttonB a').html(i + 's');
                            }
                        }, 1000);


                    }else{
                        layer.msg(res.msg,{icon:5});
                        return false;
                    }
                }
            });

            //ajax  传值判断
        });
    }
    getButton();

    //        $("#signSubmit").hover(function () {
    //            $("#signSubmit").css({"background-color":"red","transition":"all 0.5s ease-in"});
    //        },function () {
    //            $("#signSubmit").css({"background-color":"#15456f","transition":"all 0.5s ease-in"});
    //        });


</script>
<script>
    $(function(){
        //定义opt
        var opt={
            beforeSubmit: insertBefor,
            success: insertOk,
            dataType: 'json',
            timeout: 5000
        };
        //ajax传输
        $('#insertWrods').ajaxForm(opt);

        function insertBefor(){
            var code = $('#code').val();
            var phone = $('#phone').val();
            if (phone == ''){
                layer.msg('手机号不能为空',{icon:5});
                return false
            }

            if (code == ''){
                layer.msg('验证码不能为空',{icon:5});
                return false
            }


            var nickname =  $('#nickname').val();
            if (nickname == ''){
                layer.msg('昵称不能为空',{icon:5});
                return false;
            }

            var pwd1 =  $('#pwd1').val();
            var pwd2 =  $('#pwd2').val();

            if (pwd2 == ''){
                layer.msg('确认密码不能为空',{icon:5});
                return false;
            }
            if (pwd1 == ''){
                layer.msg('密码不能为空',{icon:5});
                return false;
            }

            if (pwd1 !== pwd2){
                layer.msg('确认密码输入的密码不相同',{icon:5});
                return false;
            }

            var alicode =  $('#alicode').val();
            if (alicode == ''){
                layer.msg('短信验证码不能为空',{icon:5});
                return false;
            }



        }
        function insertOk(res){
            if (res.code == 1){
                layer.msg(res.msg, {icon: 6});
                window.setTimeout("window.location='/'",1500);


            }else if(res.code == 0){
                layer.msg(res.msg, {icon:5});
            }else{
                layer.msg(res.msg, {icon:5});
            }
        }

    });

</script>
</body>
<br><br><br>
</div>
{include file="public/footer" /}

{include file="public/foot" /}
</html>






